@page
@model SinglePostWithComments<BlogPost>
@{
    ViewData["Title"] = Model.Data.Title;
}
@section head
{
    @WebApp.MetaTags(Model.Data)
}

<div class="container body-container body-top">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10 col-xs-12">
            <h1>@Model.Data.Title</h1>
            <p class="small">
                <strong>In</strong> <a href="@WebApp.Url(Model.Data.Category)">@Model.Data.Category.Title</a> <span class="sep">&#9670;</span>
                <strong>Tags</strong>
                @foreach (var tag in Model.Data.Tags)
                {
                    <a href="@WebApp.Url(tag)">#@tag.Title</a>
                }
                <span class="sep">&#9670;</span>
                <strong>Published</strong> @Model.Data.Published.Value.ToString("yyyy-MM-dd")
                @if (Model.Data.EnableComments && Model.Data.CommentCount > 0)
                {
                    <span class="sep">&#9670;</span>
                    <a href="#comments">@Model.Data.CommentCount @(Model.Data.CommentCount == 1 ? "comment" : "comments")</a>
                }
            </p>
        </div>
    </div>

    @if (Model.Data.PrimaryImage.HasValue)
    {
        <div class="row justify-content-center">
            <div class="col-lg-10 col-md-12">
                <img class="primary-image" src="@WebApp.Url(Model.Data.PrimaryImage)">
            </div>
        </div>
    }

    <div class="row justify-content-center">
        <div class="col col-lg-8 col-md-10">
            @if (!string.IsNullOrEmpty(Model.Data.Excerpt))
            {
                <p class="lead">@Model.Data.Excerpt</p>
            }

            @Html.DisplayFor(m => m.Data.Blocks)
        </div>
    </div>

    @if (Model.Data.EnableComments)
    {
        <div class="row justify-content-center comments">
            <div id="comments" class="col col-lg-8 col-md-10">
                @if (Model.Data.IsCommentsOpen)
                {
                    <div class="alert alert-warning mt-2 mb-5">
                        <form asp-page-handler="SaveComment" method="post">
                            @Html.AntiForgeryToken()
                            @Html.Hidden("Id", Model.Data.Id)

                            <h4 class="mb-3">Leave a comment</h4>
                            <p class="mb-4"><small>
                                Please note that we won't show your email to others, or use it for sending
                                unwanted emails. We will only use it to render your Gravatar image and to
                                validate you as a real person.
                            </small></p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input name="CommentAuthor" type="text" class="form-control form-control-sm" placeholder="Your name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <input name="CommentEmail" type="text" class="form-control form-control-sm" placeholder="Your email address">
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="CommentUrl" type="text" class="form-control form-control-sm" placeholder="An (optional) URL to your website">
                            </div>
                            <div class="form-group">
                                <textarea name="CommentBody" rows="6" class="form-control form-control-sm" placeholder="Your awesome comment"></textarea>
                            </div>
                            <div class="form-group text-left">
                                <button class="btn btn-sm btn-success">Post Comment</button>
                            </div>
                        </form>
                    </div>
                }
                @Html.DisplayFor(m => m.Comments)
            </div>
        </div>
    }
</div>